<template>
	<view style="height: 100%;">
			<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
			<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
			<z-paging ref="paging" v-model="list" @query="queryList" :fixed="false" :auto="true">
				<view class="" slot="top" style="background-color: #F8F8F8;z-index:20">
					<!-- 顶部栏位 -->
					<u-navbar class="navbar" :border-bottom="false" title="库存管理" :title-size="36" :title-bold="true" :title-color="textColor" :customBack="back">
						<template #right>
								<view class="u-p-r-30" @tap="$mRouter.push({ route: '/pages/sale/kucun/creatInventory'})">新增</view>
						</template>
					</u-navbar>
					<!-- 搜索栏和选项卡固定 -->
					<view class="u-p-b-30" style="background-color: #FFFFFF;">
						<view class="u-flex">
							<view class="u-p-l-35 u-flex u-col-center" @tap="$mRouter.push({ route: '/pages/sale/classManger/index?type=Seller&isChoose=true&name='+searchClass.name+'&id='+searchClass.id })">
								<view class="u-m-r-10 u-line-1" style="max-width: 120rpx;">{{searchClass.name}}</view>
								<u-icon name="arrow-down-fill"></u-icon>
							</view>
							<view class="" style="flex:1">
								<!-- 搜索栏位 -->
								<ak-search-input type="text" :searchPlaceHolder="searchPlaceHolder" @focus="showMask(true)" @blur="showMask(false)" @search="search"></ak-search-input>
							</view>
						
						</view>
					</view>
					<view class="u-flex">
						<u-dropdown class="flilter-item" :active-color="'#ffbb1a'" border-bottom	>
							<u-dropdown-item @change="itemListInit" v-if="ownerList.length!==0" :inheritParent="true" v-model="searchOwner" title="品牌商" :options="ownerList"></u-dropdown-item>
							<u-dropdown-item @change="itemListInit" :inheritParent="true" v-model="searchInventory" title="库存状态"  :options="inventoryStatus"></u-dropdown-item>
							<u-dropdown-item @change="itemListInit" :inheritParent="true" v-model="searchItemStatus" title="商品状态" :height="'500rpx'" :options="itemStatus"></u-dropdown-item>
						</u-dropdown>
					</view>
					
				</view>
				<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="box-padding u-p-t-10 inventory-list">
				<view class="item" v-for="(item, index) in list" :key="index" :style="{border: index+1 == list.length ? 'none': ''}" @click="toPage(item)">
					<view class="u-flex">
						<img :src="item.url" style="width: 100rpx;height:100rpx;border-radius: 10rpx;vertical-align:middle; display: inline-block;" alt="" />
						<view class="" style="max-width:400rpx;margin-left: 20rpx;color: #333333;">{{ item.itemName }}</view>
					</view>
					<view class="u-flex">
						<text class="badge-color u-font-30 text-bold" >{{ item.inventoryBalance }}</text>
						<text class="u-font-22 u-m-r-12 u-m-l-8" >{{item.unit||'瓶'}}</text>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
			</view>
				
			</z-paging>
	
		<!-- 遮罩层 -->
		<u-mask :show="isShowMask" :duration="0" :z-index="10"></u-mask>
		<!--页面加载动画-->
	</view>
</template>

<script>
	import AkSearchInput  from '@/components/ak-search-input'
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		components: { AkSearchInput },
		data() {
			return {
				isShowMask: false,
				searchPlaceHolder: '葡萄酒',
				list: [],
				refreshIfNeeded:false,
				searchClass:{
					name:'店内分类',
					id:''
				},
				searchName:'',
				searchOwner:'',
				searchInventory:'',
				searchItemStatus:'',
				ownerList:[],
				inventoryStatus:[
					{
						label: '全部',
						value: 0,
					},
					{
						label: '库存不足',
						value: 1,
					},
					{
						label: '库存充足',
						value: 2,
					},
				],
				itemStatus:[
					{
						label: '已停售',
						value: true,
					},
					{
						label: '正常销售',
						value: false,
					},
				]
			}
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		onShow() {
			uni.$off('sendClassData')//建议先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
			let that = this;
			uni.$once('sendClassData',function(data){
				console.log(data);
					//这的data就是B页面传递过来的数据
					that.searchClass.name=data.name===''?'选择分类':data.name;
					that.searchClass.id=data.id===''?'':data.id;
			})
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage._data.refreshIfNeeded) {
				currentPage._data.refreshIfNeeded = false;
				//这里为要调用的函数，重新获取数据，记得加上this
				this.itemListInit();
			}
		},
		onLoad() {
			this.getOwnerListFn();
		},
		onReady() {
			// setTimeout(() => {
			// 	this.loading = false
			// }, 1000)
		},
		onBackPress(options) {
			uni.switchTab({
				url: '/pages/sale/index'
			})
			return true
		},
		methods: {
			itemListInit(){
				this.$refs.paging.reload();
			},
			// GetLevelsByShop
			async getOwnerListFn(){
				const res  = await this.$newHttp.get('api/Seller/GetBrandOwners',{params:{shopId:this.storeShop.id}});
				console.log(res);
				if(res.code === 200){
					let ary = [{
						label:'全部',
						value:'',
					}];
					let ownerlist = res.data.map(item=>{
						return {
							label:item.name,
							value:item.shopId
						}
					});
					this.ownerList = ary.concat(ownerlist);
				}
			},
			// GetLevelsByShop
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				console.log(222);
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					shopId: this.storeShop.id,
				}
				if(this.searchName!== ''){
					params.name = this.searchName;
				}
				if(this.searchClass.id!== ''){
					params.ShopCategoryId = this.searchClass.id;
				}
				if(this.searchOwner!== ''){
					params.BrandOwnerId = this.searchOwner;
				}
				if(this.searchInventory!== ''){
					params.InventoryFilterPolicy = this.searchInventory;
				}
				if(this.searchItemStatus!== ''){
					params.IsHaltSale = this.searchItemStatus;
				}
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				const res = await this.$newHttp.get('api/v1.2/Seller/GetShopInventoriesPage', { params: params } );
				uni.hideLoading({
					title: '加载中...'
				})
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			toPage(item) {
				// this.$mRouter.push({ route: '/pages/sale/kucun/weihu', query: item })
				this.$mRouter.push({ route: '/pages/sale/kucun/weihu?inventoryId='+item.inventoryId });
			},
			search(e) {
				this.isShowMask = false
				uni.hideKeyboard()
				this.searchName= e;
				console.log(e);
				this.$refs.paging.reload();
			},
			showMask(bool) {
				bool ? this.searchPlaceHolder = '' : this.searchPlaceHolder = '葡萄酒'
				this.isShowMask = bool
			},
			back() {
				this.$mRouter.switchTab({ route: '/pages/sale/index' })
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" >
	.inventory-list{
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-bottom: 20rpx;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #F3F3F3;
		}
	}

	.flilter-item{
		background: #fff;
		::v-deep .u-dropdown__menu{
			.u-dropdown__menu__item{
				position: relative !important;
				.u-flex{
					position: relative !important;
				}
			}
		}
		::v-deep .u-dropdown__content{
			pointer-events: auto;
		}
		
	}
</style>
